<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index1.1.css">
    <link rel="stylesheet" href="font/download/font_mm32tcpdze/iconfont.css">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <title>商品详情</title>
    <script>
        window.onload = window.onresize = function(){		 
            var view_width = document.getElementsByTagName('html')[0].getBoundingClientRect().width;
            //找到标签名为html的第一个
            var _html = document.getElementsByTagName('html')[0];
            //如果屏幕宽度大于640 
            //就用 640/16=40
            //小于640的时候 不确定 也是尺寸/40
            view_width>640?_html.style.fontSize = 640 / 16 + 'px':_html.style.fontSize = view_width / 16 + 'px';
            //最大网页尺寸640 
            //最大字体（根字体大小） 40
        }
    </script>
</head>
<body>
<header>
    <div class="top">
        <p class="p1 fl"><a href="index.html">&lt;</a></p>
        <p class="p2 fl">商品详情</p>
    </div>
</header>
<div class="content">
    <div class="banner">
        <ul class="ul1 clearfix" id="ul1">
            <li class="show">
                <a href="###"><img src="img/tu1.png" alt=""></a>
            </li>
            <li>
                <a href="###"><img src="img/tu2.png" alt=""></a>
            </li>
        </ul>
        <ul class="ul2 clearfix" id="ul2">
            <li class="active"></li>
            <li></li>
        </ul>
    </div>
    <div class="text">
        <div class="t_top">
            <p class="p1">卡尔适大理石茶几电视柜组合小户型实木茶几地柜组合</p>
            <p class="p2">10月01日00:00 - 10月08日00:00</p>
        </div>
        <div class="t_btm">
            <p class="p1 fl"><span class="iconfont icon-taoicon"></span><em>狄普旗舰店</em></p>
            <p class="p2 fr">视频制作费:<em>￥50-￥100</em></p>
        </div>
    </div>
</div>
<!-- 详细信息 -->
<div class="content2">
    <div class="top clearfix">
        <span class="fl"></span>
        <h4 class="fl">详细信息</h4>
    </div>
    <div class="bottom clearfix">
        <ul class="ul1 fl">
            <li>推广平台 : 抖音</li>
            <li>产品价格 : ￥300.00</li>
            <li>寄样验货 : 150份</li>
        </ul>
        <ul culass="ul2 fr">
            <li>粉丝要求 : 2000以上</li>
            <li>佣金预估 : ￥30.50</li>
        </ul>
    </div>
</div>
<!-- 亮点 -->
<div class="content3">
    <p><em>“</em>这里是亮点介绍，这里是亮点介绍，这里是亮点介绍，这里是亮点介绍，这里是亮点介绍，</p>
</div>
<!-- 拍摄要求 -->
<div class="content4">
    <div class="top clearfix">
        <span class="fl"></span>
        <h4 class="fl">拍摄要求</h4>
    </div>
    <div class="text">
        <p>是对实地拍摄的记录，是由场记负责完成的记录整个拍摄过程的剧本形式，是场记的工作台本，主要为后期编辑时提供依据，其形式与分镜头剧本近似，内容包括镜头顺序、景别、摄法、画面内容、台词、每个镜头的拍摄次数、每次拍摄的时间长度及效果等等。在拍摄中，导演常常临时改变分镜头剧本，所以，实拍镜头记录本才同拍成的影片镜头相一致。</p>
    </div>
</div>
<!-- 产品介绍 -->
<div class="content5">
    <div class="top clearfix">
        <span class="fl"></span>
        <h4 class="fl">产品介绍</h4>
    </div>
    <div class="img">
        <img src="img/tu6.png" alt="">
    </div>
    <div class="text">
        <p>品牌: 卡尔适CARZZI型号: 2136材质: 木木质材质: 橡木风格:  简约现代形状:方形安装方式:组装颜色分类:茶几电视柜茶几+电视柜饰面材质:大理石是否可伸缩:不可伸缩结构工艺: 木质工艺木质结构工艺:其他是否可定制:否是否带滚轮:否门数量: 2门是否带储物空间:是可送货/安装:上海 东莞市 北京</p>
    </div>
    <div class="tuiguang">
        <h6>推广链接:</h6>
        <p class="p1">
            https://org.modao.cc/app/hgaoi1o8hpek14sf
            5qj8yo4lnif5s3hgaoi1o8hpek14sf5qj8yo4;nif5
        </p>
        <p class="p2">
            <a href="###" id="fuzhi">点此一键复制</a>
        </p>
    </div>
</div>
<script>
    var fuzhi = document.getElementById('fuzhi')
        fuzhi.onclick = function(){
            alert('复制成功')
        }
</script>
<!-- 规则说明 -->
<div class="content6">
    <p class="p1">规则说明</p>
    <p class="p2">品牌:卡尔适CARZZI型号: 2136材质:木木质材质:橡木风格:简约现代形状:方形安装方式:组装颜色分类:茶几电视柜茶几+电视柜饰面材质:大理石是否可伸缩:不可伸缩结构工艺:木质工艺木质结构工艺:|其他是否可定制:否是否带滚轮:否门数量: 2门是否带储物空间:是可送货/安装:上海东莞市北京广州市深圳市青岛市佛山市产地:广东省地市:佛山市区县:顺德区是否组装:组装包装体积:3是否可预售:是出租车是否可运输:否茶几角形状:|方形设计元素:大师设计款式定位:品
    质奢华型安装说明详情:提供安装说明书
    </p>
</div>
<!-- 报名 -->
<div class="content7">
    <div class="top">
        <a href="index1.1.1.html">
            <div class="circle">
                <div class="circle1"></div>
                <div class="circle2">报名</div>
            </div>
        </a>
        <p class="p1">已有126人参与，<a href="index1.1.7.html">查看全部&gt;</a></p>
        <ul class="tx">
            <li><img src="img/tu7.png" alt=""></li>
            <li><img src="img/tu7.png" alt=""></li>
            <li><img src="img/tu7.png" alt=""></li>
            <li><img src="img/tu7.png" alt=""></li>
            <li><img src="img/tu7.png" alt=""></li>
            <li><img src="img/tu7.png" alt=""></li>
        </ul>
    </div>
   
    <div class="bottom">
        <p class="p2"><a href="index1.1.html">分享给好友</a></p>
    </div>
</div>




<script>
    var ul1 = document.getElementById('ul1')
    var li1 = ul1.getElementsByTagName('li')
    var ul2 = document.getElementById('ul2')
    var li2 = ul2.getElementsByTagName('li')
    setInterval(function(){})
        for(i=0;i<li2.length;i++){
            li2[i].index = i
            li2[i].onclick = function(){
                for(i=0;i<li2.length;i++){
                    li2[i].className= ''
                    li1[i].className = ''
                }
                    this.className = 'active'
                    li1[this.index].className = 'show'
            }
        }
    
      
</script>
</body>
</html>